<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/animate.min.css">
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/video-js.css">
  <link rel="stylesheet" href="css/font.css">
  <link rel="stylesheet" href="css/index.css">
  <script src="js/flexible.js"></script>
</head>
<body>
  <div id="app">
    <!-- edu-header -->
    <div class="edu-header">
      <div class="edu-header-info">
        <div class="weather">
          <div class="weather-text">晴转多云 20/11</div>
          <div class="weather-ico"></div>
        </div>
        <div class="date">10月20日 周五 农历九月初一</div>
      </div>
    </div>
    <!-- /edu-header -->
    <!-- edu-main -->
    <div class="edu-main header-through nav-through">
      <div class="edu-carousel">
        <div class="swiper-container" id='record-focus'>
          <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="img/carousel-temp-1.jpg"></div>
            <div class="swiper-slide"><img src="img/carousel-temp-2.jpg"></div>
            <div class="swiper-slide"><img src="img/carousel-temp-3.jpg"></div>
            <div class="swiper-slide"><img src="img/carousel-temp-4.jpg"></div>
            <div class="swiper-slide"><img src="img/carousel-temp-5.jpg"></div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <div class="swiper-container" id='record-list'>
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="edu-filter" id='record-filter'>
              <div class="edu-select" id='record-filter-grade'>
                <input type="hidden">
                <div class="edu-select-text">学段</div>
                <div class="edu-select-caret"></div>
                <div class="edu-select-bound">
                  <div class="edu-select-bound-wrap">
                    <div class="edu-select-bound-item" data-value='1'>初小</div>
                    <div class="edu-select-bound-item" data-value='2'>中小</div>
                    <div class="edu-select-bound-item" data-value='3'>高小</div>
                    <div class="edu-select-bound-item" data-value='4'>初一</div>
                    <div class="edu-select-bound-item" data-value='5'>初二</div>
                    <div class="edu-select-bound-item" data-value='6'>初三</div>
                    <div class="edu-select-bound-item" data-value='7'>高中</div>
                  </div>
                </div>
              </div>
              <div class="edu-select" id='record-filter-subject'>
                <input type="hidden">
                <div class="edu-select-text">科目</div>
                <div class="edu-select-caret"></div>
                <div class="edu-select-bound">
                  <div class="edu-select-bound-wrap">
                    <div class="edu-select-bound-item" data-value='1'>语文</div>
                    <div class="edu-select-bound-item" data-value='2'>数学</div>
                    <div class="edu-select-bound-item" data-value='3'>英语</div>
                    <div class="edu-select-bound-item" data-value='4'>品德与生活</div>
                    <div class="edu-select-bound-item" data-value='5'>科学</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="edu-vessel">
              <div class="edu-vessel-inner">
                <div class="edu-title">观看记录<i>观看记录</i></div>
                <div class="swiper-container has-progress-swiper" id='record-list-page'>
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <div class="edu-thumbnail-wrap">
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                              <div class="edu-thumbnail-intro">观看至 10:30</div>
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                              <div class="edu-thumbnail-intro">观看至 10:30</div>
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                              <div class="edu-thumbnail-intro">观看至 10:30</div>
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                              <div class="edu-thumbnail-intro">观看至 10:30</div>
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                              <div class="edu-thumbnail-intro">观看至 10:30</div>
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                              <div class="edu-thumbnail-intro">观看至 10:30</div>
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                              <div class="edu-thumbnail-intro">观看至 10:30</div>
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                              <div class="edu-thumbnail-intro">观看至 10:30</div>
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="edu-thumbnail-wrap">
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                              <div class="edu-thumbnail-intro">观看至 10:30</div>
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                              <div class="edu-thumbnail-intro">观看至 10:30</div>
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                              <div class="edu-thumbnail-intro">观看至 10:30</div>
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                              <div class="edu-thumbnail-intro">观看至 10:30</div>
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                              <div class="edu-thumbnail-intro">观看至 10:30</div>
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                              <div class="edu-thumbnail-intro">观看至 10:30</div>
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                              <div class="edu-thumbnail-intro">观看至 10:30</div>
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                              <div class="edu-thumbnail-intro">观看至 10:30</div>
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="edu-thumbnail-wrap">
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                              <div class="edu-thumbnail-intro">观看至 10:30</div>
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                              <div class="edu-thumbnail-intro">观看至 10:30</div>
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                              <div class="edu-thumbnail-intro">观看至 10:30</div>
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                              <div class="edu-thumbnail-intro">观看至 10:30</div>
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                              <div class="edu-thumbnail-intro">观看至 10:30</div>
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                              <div class="edu-thumbnail-intro">观看至 10:30</div>
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                              <div class="edu-thumbnail-intro">观看至 10:30</div>
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                              <div class="edu-thumbnail-intro">观看至 10:30</div>
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-scrollbar edu-scrollbar"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="edu-searchbar">
              <div class="edu-searchbar-inner">
                <div class="edu-searchbar-ico"></div>
              </div>
            </div>
            <div class="edu-vessel">
              <div class="edu-vessel-inner">
                <div class="edu-title">搜索结果<i>搜索结果</i></div>
                <div class="swiper-container has-progress-swiper" id='record-list-result'>
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <div class="edu-thumbnail-wrap">
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                        <div class="edu-thumbnail" data-video-id='1'>
                          <div class="edu-thumbnail-preview">
                            <div class="edu-thumbnail-preview-inner">
                              <img src="./img/media-temp.png">
                            </div>
                          </div>
                          <h4>宝迪英语学堂</h4>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-scrollbar edu-scrollbar"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="top: 12.037rem;" class="active record-list-page-prev swiper-button-prev edu-prev"></div>
      <div style="top: 12.037rem;" class="active record-list-page-next swiper-button-next edu-next"></div>
      <div style="top: 12.037rem;" class="record-list-result-prev swiper-button-prev edu-prev"></div>
      <div style="top: 12.037rem;" class="record-list-result-next swiper-button-next edu-next"></div>
    </div>
    <!-- /edu-main -->
    <!-- edu-nav -->
    <div class="edu-nav">
      <a href="index.html" class="edu-nav-link">首页<i>首页</i></a>
      <a href="news.html" class="edu-nav-link">新闻<i>新闻</i></a>
      <a href="video.html" class="edu-nav-link">视频<i>视频</i></a>
      <a href="record.html" class="edu-nav-link active">记录<i>记录</i></a>
      <a href="#" class="edu-nav-link back">返回<i>返回</i></a>
    </div>
    <!-- /edu-nav -->
  </div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/underscore-min.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/video.min.js"></script>
<script>
  
  // 焦点图
  var focus = new Swiper('#record-focus', {
    loop: true,
    autoplay: {
      delay: 5000,
      disableOnInteraction: false
    },
    pagination: {
      el: '#record-focus .swiper-pagination',
      clickable: true
    }
  })
  
  var _navigation

  // 列表
  var recordList = new Swiper('#record-list', {
    allowTouchMove: false,
    on: {
      slideChange: function() {
        if (this.activeIndex === 1) {
          _navigation = $('.edu-prev.active, .edu-next.active')
          $('.edu-prev, .edu-next').removeClass('active')
          $('.record-list-result-prev, .record-list-result-next').addClass('active')
        } else if (this.activeIndex === 0) {
          $('.edu-prev, .edu-next').removeClass('active')
          _navigation.addClass('active')
        }
      }
    }
  })
  
  hasProgressSwiper('#record-list-page', { allowTouchMove: false, })
  hasProgressSwiper('#record-list-result', { allowTouchMove: false, })

  // 有进度条的swiper
  function hasProgressSwiper(el, config) {
    return new Swiper(el, $.extend({
      navigation: {
        nextEl: el.replace('#', '.') + '-next',
        prevEl: el.replace('#', '.') + '-prev'
      },
      scrollbar: {
        el: el + ' .swiper-scrollbar',
        draggable: true
      },
      on: {
        init: function() {
          setTimeout(() => {
            $('<div class="edu-scrollbar-indicator">' + (this.activeIndex + 1 + '\/' + this.slides.length) + '</div>').appendTo($(this.$el).find('.swiper-scrollbar-drag'))
          }, 0)
        },
        slideChange: function() {
          this.$el.find('.edu-scrollbar-indicator').text(this.activeIndex + 1 + '\/' + this.slides.length)
        }
      }
    }, config || {}))
  }


  // 底部菜单返回按钮
  $(document).on('click', '.edu-nav-link.back', function(e) {
    if ($('.edu-news-detail,.edu-video-detail').hasClass('active')) { // 如果有详情页打开则关闭详情页
      $(that.el.closest).removeClass('active')
      $(that.el.router).css('visibility', 'visible')
    } else if (window.recordList.activeIndex === 1) { // 如果正在记录结果页，则跳回到记录搜索页
      window.recordList.slideTo(0)
    } else { // 路由返回
      history.back()
    }
  })

  // 自定义下拉列表框
  $(document).on('click', '.edu-select', function(e) {
    var $el = $(e.target),
        isClickBound = $el.is('.edu-select-bound') ? true : false

    if (!$el.is('.edu-select')) {
      $el = $el.parents('.edu-select')
    }

    if ($el.hasClass('active')) {
      // 如果已经打开则关闭
      !isClickBound && $el.removeClass('active')
    } else {
      $el.addClass('active')
    }


  })
  
  // 选择自定义下拉列表框内容
  $(document).on('click', '.edu-select-bound-item', function(e) {
    e.stopPropagation()

    var $el   = $(e.target),
        $p    = $el.parents('.edu-select'),
        $ipt  = $p.find('[type="hidden"]'),
        $txt  = $p.find('.edu-select-text'),
        value
    
    if (!$el.is('.edu-select-bound-item')) {
      $el = $el.parents('.edu-select-bound-item')
    }

    value = $el.data('value')
    
    $txt.text($el.text())
    $ipt.val(value)

    $p.removeClass('active')

  })
  
  // 记录页面
  var recordFilterLimitTime = 2000,
      recordFilterLimitTimer

  $(document).on('click', '#record-filter .edu-select-bound-item', function(e) {
    // 重新计算时间
    clearTimeout(recordFilterLimitTimer)
    
    // 筛选的value值
    var gradeVal   = $('#record-filter-grade input[type="hidden"]').val(),
        subjectVal = $('#record-filter-subject input[type="hidden"]').val()

    recordFilterLimitTimer = setTimeout(function() {
      // window.recordList.slideTo(1)
    }, recordFilterLimitTime)

  })
  
  // 按钮动画
  $(document).on('click', '.edu-next,.edu-prev,.edu-nav-link', function(e) {

    var $el = $(e.target)

    if (!$el.is('.edu-next,.edu-prev,.edu-nav-link')) {
      $el = $el.parents('.edu-next,.edu-prev,.edu-nav-link')
    }

    $el.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
      $el.removeClass('rubberBand')
    }).addClass('animated rubberBand')
  })
</script>
</html>